ChatGPT plugins を使って視覚的なシステム構成図をチャット上に表示しながら作成する体験をしてみた

若槻龍太

2023.05.15

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、CX事業本部 Delivery部の若槻です。

まだベータ提供ではありますが、ChatGPT でついに公式プラグイン機能（ChatGPT plugins）が使えるようになりました。

これらのうちまだ数は少ないですが、ソフトウェア開発に役立つプラグインもすでにいくつか提供されています。

Name	Description (日本語訳)
CreatiCode Scratch	Scratchプログラムを画像として表示し、CreatiCode Scratchの拡張機能を使用して2D/3Dプログラムを作成します。
Diagram It (Show me)	チャットで直接ダイアグラムを作成し、編集します。
Noteable	データを探索し、ビジュアライズし、ノートブックを全員と共有するためにPython、SQL、Markdownでノートブックを作成します。

今回は、これらのうち「Diagram it (※ Show me)」プラグインを使って視覚的なシステム構成図をチャット上に表示しながら作成することができたので紹介します。

※ 一夜明けたらプラグインの名前が Diagram it から Show me に変わっていました。

試してみた

プラグインのインストール

プラグインをチャットにインストールします。プラグインは GPT-4 バージョンでのみ利用できます。

新規チャットで GPT-4 -> Plugins を選択。

すると Plugin store が表示されます。ここでインストールしたいプラグインを探します。

Diagram It を見つけたら Install をクリックします。

プラグインがインストールされました。

プラグインを使ってみる

チャットで質問をしてみます。

まずは次の質問をコンソールに入力してみました。

次のサービスから成る AWS サーバーレス構成のシステム構成図を作成してください

- Amazon API Gateway REST API 
- AWS Lambda Function
- Amazon DynamoDB Table

すると Diagram It が回答の生成を始めました。ChatGPT から API へのリクエストが行われているようです。

10秒ほど待つと回答が返ってきました。

以下が要求されたAWSサーバーレス構成のシステム構成図です：

![AWS Serverless Architecture](https://showme.redstarplugin.com/s/In0KQCxG)

[この図をオンラインで編集したい場合はこちらをクリックしてください。](https://showme.redstarplugin.com/s/RO81WVtU)

この図では、次のようなプロセスが示されています：

1. Amazon API Gateway REST APIがAWS Lambda Functionをトリガーします。
2. AWS Lambda FunctionはAmazon DynamoDB Tableに対して読み書きを行います。

これにより、クライアントからのリクエストがAPI Gatewayを経由してLambda Functionに渡され、その結果がDynamoDB Tableに保存されるという流れが視覚化されています。

質問では3つのリソースを利用するようにのみ指定しましたが、回答ではそれらリソースを利用したよくあるパターンの構成図とプロセスが記載されています。

回答中の この図をオンラインで編集したい場合はこちらをクリックしてください。 からリンクを開くと Mermaid Live Editor（※）で図が開きました。こちらで構成図のコードを確認したり、編集をしたりすることができるようになっています。

※ Mermaid Live Editor は、Mermaid オープンソースプロジェクトから生まれた Mermaid Chart 社により提供される、視覚化された図をテキストベースで作成できるサービスです。

また回答中に表示されている構成図は Mermaid Live Editor 上の構成図の画像リンクとなっており、開くと図のみをブラウザで表示させることができます。

回答冒頭の Used Diagram Id というメニューを開くと、API にリクエストされた mermaid のコードおよび、レスポンスが確認できます

さらに質問をしてみる

直前の回答の図を修正するように追加の質問をしてみます。

REST API  で Amazon Cognito Authorizer によるIDトークンを利用した認可をするように上記の図を修正して

すると直前の回答の図を修正する形で回答が返ってきました。

以下が修正されたAWSサーバーレス構成のシステム構成図です：

![AWS Serverless Architecture with Cognito Authorization](https://showme.redstarplugin.com/s/ShFcqi6x)

[この図をオンラインで編集したい場合はこちらをクリックしてください。](https://showme.redstarplugin.com/s/9xCnstU3)

この図では、次のようなプロセスが示されています：

1. Amazon API Gateway REST APIがIDトークンを用いてAmazon Cognito Authorizerに認可を要求します。
2. Amazon Cognito Authorizerが認可を行い、その結果を基にAWS Lambda Functionをトリガーします。
3. AWS Lambda FunctionはAmazon DynamoDB Tableに対して読み書きを行います。

これにより、クライアントからのリクエストがAPI Gatewayを経由してCognito Authorizerによる認可を受け、その結果に基づいてLambda Functionが動作し、その結果がDynamoDB Tableに保存されるという流れが視覚化されています。

文脈を理解してチャットをしながら、図を作成してくれるのはとても便利ですね。